<template>
  <div class="shop">
    <!-- if (refundStatus === 5) return '退款中';
    if (refundStatus === 10) return '已拒绝';
    if (refundStatus === 15) return '退款成功';
    if (refundStatus === 20) return '退款失败';

    if (orderStatus === 1) return '待支付';
    if (orderStatus === 5) return hx ? '待核销' : '待发货';
    if (orderStatus === 6) return '已发货';
    if (orderStatus === 7) return '已收货';
    if (orderStatus === 10) return '已完成';
    if (orderStatus === 11) return '已结算';
    if (orderStatus === 15) return '已取消';
    if (orderStatus === 20) return '已关闭';
    return ''; -->
    <div class="order_top">
      <div class="order_top_l">
        <span class="order_number">订单号:&nbsp;{{shoporderData.orderNo}}</span>
        <p>下单用户:&nbsp;{{shoporderData.payMethodName}}</p>
        <p>
          订单类型:&nbsp;<strong>{{orderTy(shoporderData.orderType)}}</strong>
          <!-- <strong v-if="shoporderData.orderType==1">爆款商品订单</strong>
          <strong v-if="shoporderData.orderType==5">现金券订单</strong>
          <strong v-if="shoporderData.orderType==10">拼团订单</strong>
          <strong v-if="shoporderData.orderType==15">会员专享订单</strong>
          <strong v-if="shoporderData.orderType==20">满减券订单</strong>
          <strong v-if="shoporderData.orderType==25">普通商品订单</strong> -->
        </p>
        <p v-if="shoporderData.remark">备注:&nbsp;{{shoporderData.remark}}</p>
        <p v-else>备注:&nbsp;无</p>
      </div>
      <div class="order_top_m">
        <p>创建时间:&nbsp;{{shoporderData.createdAt}}</p>
        <p v-if="shoporderData.closeTime">核销时间:&nbsp;{{shoporderData.closeTime}}</p>
        <!-- <p v-else>
          核销时间:&nbsp;
          <strong>---</strong>
        </p> -->
      </div>
      <div class="order_top_m">
        <div class="order_status">
          <p>状态:<strong>{{shoporderData.orderStatusText}}-{{shoporderData.refundStatusText}}</strong></p>
          
          
          <!-- <strong v-if="shoporderData.order_status==5">已支付</strong>
          <strong v-if="shoporderData.order_status==10">已核销</strong>
          <strong v-if="shoporderData.order_status==15">已取消</strong>
          <strong v-if="shoporderData.order_status==20">已失效</strong> -->
        </div>
        <div class="order_amount">
          <p>订单金额:<strong>{{shoporderData.actualAmount}}</strong></p>
          
        </div>
        <!-- <div class="order_amount">
          <p>返红包数:<strong>{{shoporderData.rewardAmount}}</strong></p>
          
        </div> -->
      </div>
    </div>
    <div class="order_line"></div>

    <div class="order_info">
      <span>商品信息:</span>
      <el-table :data="tableData"
        style="width:100%"
        max-height="680"
        :cell-style="tc"
        :header-cell-style="tccolor">
        <el-table-column prop="id"
          label="商品编号"></el-table-column>
        <el-table-column prop="title"
          label="商品名称"></el-table-column>
        <el-table-column prop="sellerName"
          label="所属小店"></el-table-column>
        <el-table-column prop="price"
          label="单价"></el-table-column>
        <el-table-column prop="quantity"
          label="数量(件)"></el-table-column>
        <el-table-column prop="amount"
          label="金额"></el-table-column>
      </el-table>

      <!-- <div class="order_total">
            <p>总计</p>
            <p class="total">{{total}}</p>
      </div>-->
    </div>
  </div>
</template>

<script>
// import {mapState} from 'vuex'
// import { orderProductDetailData } from "@/api/managent";
import { orderDetail } from "@/api/order";
export default {

  data () {
    return {
      tableData: [],
      orderId: '',
      shoporderData: {}
    };
  },
  computed: {

    // ...mapState({
    //     shoporderData: state => state.shoporderData
    // })

  },
  mounted () {
    this.orderId = this.$route.query.order_no
    if (this.orderId) {
      this.getorderProductDetailData()
    }
  },
  methods: {
    async getorderProductDetailData () {
      let res = await orderDetail(this.orderId)
      console.log(res)
      this.shoporderData = res.data
      this.tableData = res.data.products
      // this.tableData.push({ order_no: res.data.order_no, title: res.data.title, shop_name: res.data.shop_name, price: res.data.price, quantity: res.data.quantity, actual_amount: res.data.actual_amount })

    },
    orderTy(key){

      let name = "首年入驻费"
      switch (key) {
        case 1:
        name = "首年入驻费"
          break;
          case 2:
        name = "次年年费"
          break;
          case 3:
        name = "充值红包"
          break;
          case 4:
        name = "小店买单(优惠买单)"
          break;
          case 5:
        name = "买小店商品"
          break;
          case 6:
        name = "平台商品"
          break;
          case 7:
        name = "爆款商品"
          break;
          case 8:
        name = "现金券"
          break;
          case 9:
        name = "拼团"
          break;
          case 10:
        name = "会员专享商品"
          break;
          case 11:
        name = "红包兑换"
          break;
          case 20:
        name = "红包充值"
          break;
          case 30:
        name = "会员卡"
          break;
        default:
          name = "首年入驻费"
          break;
      }
      return name
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  position: absolute;
  width: 100%;
  .order_top {
    display: flex;
    flex-direction: row;

    p {
      margin-bottom: 20px;
    }

    strong {
      color: #f4222d;
      font-weight: 400;
    }
    .order_top_l {
      padding: 20px;
      height: 200px;
      flex: 1;
      .order_number {
        font-weight: 700;
        font-size: 21px;
        line-height: 21px;
        width: 300px;
        display: block;
        margin-bottom: 30px;
      }
    }
    .order_top_m {
      flex: 3;
      height: 200px;
      padding: 70px 0;
    }
    .order_top_r {
      height: 200px;
      flex: 1;
      display: flex;
      flex-direction: row;
      p {
        color: #999999;
        margin-bottom: 10px;
      }
      strong {
        font-size: 21px;
        color: #333333;
      }
      .order_status {
        flex: 1;
        padding: 70px 0;
      }
      .order_amount {
        flex: 1;
        padding: 70px 0;
      }
    }
  }

  .order_line {
    margin: 10px 0;
    color: #a8a8a8;
    height: 1px;
  }

  .order_info {
    padding: 0 20px;
    span {
      display: block;
      font-size: 21px;
      font-weight: 700;
    }
  }

  // .order_total{
  //     p{
  //         text-align: center;
  //         line-height: 50px;
  //         display: block;
  //          width: 180px;
  //          float: left;
  //     }
  //     .total{
  //         float: right;
  //         font-weight: 700;
  //     }
  // }
}
</style>